<template>
    <div>
        <!-- 头部导航 -->
        <el-header height="auto">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/Main/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a>添加数据</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加商铺</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                    <img src="../../../assets/img/default.jpg" alt />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="goToIndex">首页</el-dropdown-item>
                    <el-dropdown-item @click.native="LogOUt">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!-- 表单内容 -->
        <el-form ref="form" :model="form" label-width="150px" class="addShop_Content">
            <el-form-item label="店铺名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-autocomplete
                    class="inline-input"
                    v-model="state1"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect"
                ></el-autocomplete>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺简介">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺标语">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺分类">
                <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="店铺特点">
                <el-checkbox v-model="checked">备选项</el-checkbox>
                <el-checkbox v-model="checked">备选项</el-checkbox>
                <el-checkbox v-model="checked">备选项</el-checkbox>
                <el-checkbox v-model="checked">备选项</el-checkbox>
                <el-checkbox v-model="checked">备选项</el-checkbox>
                <el-checkbox v-model="checked">备选项</el-checkbox>
            </el-form-item>
            <el-form-item label="配送费">
                <el-input-number
                    v-model="num1"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    label="描述文字"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="起送价">
                <el-input-number
                    v-model="num2"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    label="描述文字"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="营业时间">
                <template>
                    <el-time-select
                        placeholder="起始时间"
                        v-model="startTime"
                        :picker-options="{
                            start: '08:30',
                            step: '00:15',
                            end: '18:30'
                        }"
                    ></el-time-select>
                    <el-time-select
                        placeholder="结束时间"
                        v-model="endTime"
                        :picker-options="{
                            start: '08:30',
                            step: '00:15',
                            end: '18:30',
                            minTime: startTime
                        }"
                    ></el-time-select>
                </template>
            </el-form-item>
            <el-form-item label="上传店铺头像">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="上传店铺头像">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="上传店铺头像">
                <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="优惠活动">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="打一折" value="shanghai"></el-option>
                    <el-option label="一元购" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <template>
                <el-table :data="tableData" style="width: 100%; margin-bottom: 20px;">
                    <el-table-column prop="title" label="活动标题" width="180"></el-table-column>
                    <el-table-column prop="name" label="活动名称" width="180"></el-table-column>
                    <el-table-column prop="details" label="活动详情"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-form-item>
                <el-button :style="{width:'auto'}" type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script src="./template.js"></script>
<style scoped>
.el-form {
    max-width: 640px;
    margin: 0 auto;
}
.addShop_Content {
    padding-top: 20px;
}
.el-form-item__label:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
}
.el-date-editor.el-input {
    width: 193px;
}
</style>